<%
layout("/layouts/platform.html"){
%>
<section class="content-wrap bg-white">
    <header class="header navbar bg-white shadow">
        <div class="btn-group tool-button">
            <a id="add" class="btn btn-primary navbar-btn" href="${base}/platform/fieldTrue/add" data-toggle='modal' data-target='#editModal'><i class="ti-plus"></i>新增场地</a>
        </div>
        <div class="btn-group tool-button">
            <a class="btn btn-default navbar-btn" href='javascript:;' onclick='exportData()'>数据导出</a>
        </div>
        <div class="pull-right offscreen-right">
            <button class="btn btn-primary navbar-btn" onclick="sublime.toggleFilter('.cd-panel')"><i
                    class="fa fa-sliders"></i> 筛选
            </button>
        </div>
    </header>
    <div id="map"></div>
	<div class="cd-panel from-right">
	    <header class="cd-panel-header">
	        <h4>高级筛选</h4>
	    </header>
	    <div class="cd-panel-container">
	        <div class="cd-panel-content shadow">
		        <form id="searchForm">
		            <div class="form-group">
		                <label for="loginname">场地名称</label>
			            <input type="text" id="name" name="name" onclick="this.value=''" class="form-control" placeholder="场地名称" autofocus>
		            </div>
		            <div class="form-group">
		                <label for="loginname">场地地址</label>
			            <input type="text" id="address" name="address" onclick="this.value=''" class="form-control" placeholder="场地地址" autofocus>
		            </div>
		            <div>
				       <input type="hidden" id="lnglat" name="lnglat"/>
				       <input type="hidden" id="ll" name="ll"/>
				    </div>
				</form>
	      		<button id="searchBtn" type="button" class="btn btn-default">查询</button>
	        </div>
	    </div>
	</div>
	<div id="dialogDelete" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                <h4 class="modal-title">删除数据</h4>
	            </div>
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-xs-12">
	                        数据删除后无法恢复，确定删除吗？ <br/>
	                    </div>
	                </div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
	                <button id="okDel" type="button" class="btn btn-primary" data-loading-text="正在删除...">确 定</button>
	            </div>
	        </div>
	    </div>
	</div>
	<div id="dialogExport" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	    <div class="modal-dialog">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
	                <h4 class="modal-title">导出数据</h4>
	            </div>
	            <div class="modal-body">
	                <div class="row">
	                    <div class="col-xs-12">
	                        	确定导出吗？ <br/>
	                    </div>
	                </div>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
	                <button id="okExport" type="button" class="btn btn-primary" data-loading-text="正在导出...">确 定</button>
	            </div>
	        </div>
	    </div>
	</div>
	<!-- 修改-->
	<div id="editModal" class="modal fade bs-modal-sm"   tabindex="-3" role="dialog" aria-hidden="true">
	    <div id="editModalDialog" class="modal-dialog " >
	        <div class="modal-content">
	        
	        </div>
	    </div>
	</div>
	<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=e9837bdd351eb9d4ace44227ff5ef185"></script>
	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script> 
	<script language="JavaScript">
	$(function () {
		loadMap();
		$("#editModal").on("hidden.bs.modal", function () {
            $(this).removeData("bs.modal");
        });
		$("#searchBtn").on('click', function () {
			map.clearMap();
			initDatatable();
	    });
	});
	var map;
	//高德地图
	function loadMap(){
		map = new AMap.Map('map', {
			resizeEnable: true,
			zoom:16
		});
		$("#lnglat").val(map.getCenter());
		$("#ll").val(map.getBounds());
		initDatatable();
		/* AMap.event.addDomListener(document.getElementById('cityfind'), 'click', function() {
			var ppcitys = "";
			 ppcitys=document.getElementById('ppcode').value;
			if(""==ppcitys){
				ppcitys=document.getElementById('ccode').value
			}
			if(""==ppcitys){
				ppcitys=document.getElementById('pcode').value
			} 
			//var cityName=ppcitys.split(";")[1]; 
			map.setCity("023");
		}); */
		map.plugin(["AMap.ToolBar"], function() {
			AMap.event.addListener(map, "mapmove", function(result) {
				$("#lnglat").val(map.getCenter());
				$("#ll").val(map.getBounds());
				initDatatable();
			});
		});
	}
	//设置标点
	function getMark(data){
		var marker = new AMap.Marker({
			position: [data.lng,data.lat]
		});
	    // 设置label标签
	    var str="";
	    var state=data.state;
	    if(state=="3"){
	    	str="<font color='blue'>已删除</font><br/>";
	    }
	    var contentStr="<div><div class='amap-combo-sharp'></div>"+data.name+"<br/>"+str+"<div style='min-width:120px;'><span class='nav-button'><a href='${base!}/platform/fieldTrue/edit/"+data.id+"' data-toggle='modal' data-target='#editModal'>查看</a></span>";
	    if(state!="3"){
	    	contentStr=contentStr+"<span class='nav-button'><a href='javascript:;' onclick='del(\"" + data.id + "\")'>删除</a></span>";
	    }
	    contentStr+="</div></div>"
		marker.setLabel({
			offset: new AMap.Pixel(20, 20),
		    content: contentStr
		});
		marker.setMap(map);
	}
	//初始化数据
	function initDatatable() {
		map.clearMap();
		$.ajax({
			url : "${base}/platform/fieldTrue/data",
			data : {
				name : $('#name').val(),
				address : $('#address').val(),
            	lnglat:$('#lnglat').val(),
            	ll:$('#ll').val()
			},
			type : "post",
			async : false,
			dataType : "json",
			success : function(data){
				var list=data.data;
				if(null !=list){
					for(var i=0;i<list.length;i++){
						getMark(list[i]);
					}
				}
			},
			error : function(XMLHttpRequest, textStatus, errorThrown) {
				return false;
			}
		});
	}
	//删除
	function del(id){
		var dialog = $("#dialogDelete");
        dialog.modal("show");
        dialog.find("#okDel").unbind("click");
        dialog.find("#okDel").bind("click", function (event) {
            var btn = $(this);
            $.post("${base}/platform/fieldTrue/delete/" + id, {}, function (data) {
                if (data.code == 0) {
                	Toast.success(data.msg);
                	initDatatable();
                } else {
                    Toast.error(data.msg);
                }
                //重置按钮状态，关闭提示框
                dialog.modal("hide");
            }, "json");
        });
	}
	//导出
	function exportData(){
		var dialog = $("#dialogExport");
        dialog.modal("show");
        dialog.find("#okExport").unbind("click");
        dialog.find("#okExport").bind("click", function (event) {
            var btn = $(this);
            $("#searchForm").attr("action","${base}/platform/fieldTrue/export/").submit();
            dialog.modal("hide");
        });
		
	}
	
</script> 
<style>
.amap-marker-label {
  position: absolute;
  z-index: 2;
  background-color: #fff;
  white-space: nowrap;
  cursor: default;
  padding: 3px;
  font-size: 12px;
  line-height: 18px;
  border-radius:4px;
  border:1px solid #f8f8f8 !important;
  box-shadow: 0 0 8px 0 rgba(0,0,0,0.5)
}
.amap-combo-sharp {
  top: 2px;
  left:-19px;
  z-index: 2;
  position: absolute;
  background: url(${base!}/assets/img/amap-info-left-ar.png)  no-repeat;
  width: 18px;
  height: 21px;
}

.nav-button a{
	border:1px #c9c9c9 solid;
	border-radius:4px;
	padding: 2px 8px;
	float:left;
	margin:5px 5px 5px 0px;
}
.nav-button a:hover{
	background-color:#0091ff;
	color:#fff;
	border:1px #eee solid;
	border-radius:4px;
	padding: 2px 8px;
	margin:5px 5px 5px 0px;

}
</style>
<%}%>
